<extend name="Public/base"/>
<block name="style">
<link rel="stylesheet" href="__CSS__/map.css"/>
<script type="text/javascript" src="{$script}"></script>
</block>
<block name="page-header">
	<li><a href="U('Map/index')"><i class="fa fa-adjust"></i>{$meta_title}</a></li>
	<li class="active"><i class="fa fa-map-marker"></i>轨迹查询</li>
</block>
<block name="body">
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h6><i class="fa fa-crosshairs"></i>轨迹查询</h6>								
					<div class="panel-actions">
						<a href="#" class="btn-minimize"><i class="fa fa-caret-up"></i></a>
						<a href="#" class="btn-close"><i class="fa fa-times"></i></a>
					</div>
				</div>
				<div class="panel-body">
					<div class="col-md-5">
					<div class="form-group col-md-6">
						<label class="col-sm-5 control-label">OBD设备</label>
						<div class="col-sm-7">
							<select class="form-control odev" name="obdid">
							<foreach name="obdid" item="obdid">
								<option class="opt" value="{$obdid.obdid}">{$obdid.obdid}</option>
							</foreach>
							</select>
						</div>
					</div>
					<div class="form-group col-md-6">
						<label class="col-sm-5  control-label">日 期</label>
						<div class="col-sm-7">
							<input class="form-control date" type="text" name="date" readonly>
						</div>
					</div>
					</div>
					<div class="col-md-5">
					<div class="form-group col-md-6">
						<label class="col-sm-5 control-label">起始时间</label>
						<div class="col-sm-7">
							<input class="form-control date" type="text" name="start" readonly>
						</div>
					</div>
					<div class="form-group col-md-6">
						<label class="col-sm-5 control-label">终止时间</label>
						<div class="col-sm-7">
							<input class="form-control date" type="text" name="stop" readonly>
						</div>
					</div>
					</div>
					<div class="form-group col-md-2">
						<button class="btn btn-info" type="submit" value="{:U('Map/line')}" >查询</button>
					</div>
				</div>
				<div id="allmap" style="width: 100%;"></div>
				<div class="desc col-md-12"></div>
		</div>
	</div>
</block>
<block name="script">
<script type="text/javascript" src="__JS__/jquery-ui.js"></script>
<script type="text/javascript" src="__PLUGINS__/touchpunch/js/jquery.ui.touch-punch.min.js"></script>	
<script type="text/javascript" src="__JS__/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="__JS__/jquery-ui-timepicker-zh-CN.js"></script>
<script type="text/javascript">
	var map = new BMap.Map("allmap");    // 创建Map实例
	  // 初始化地图,设置中心点坐标和地图级别
	function myFun(result){
		map.centerAndZoom(new BMap.Point(result.center.lng, result.center.lat), 14);
		infoWin();
	}
	var myCity = new BMap.LocalCity();
	myCity.get(myFun);
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.enableScrollWheelZoom(true);
	var polyline;
	var marker;
	var points = [];
	var timer; // 定时器
	var index = 0; // 记录播放到第几个point
	$(function(){
		$("#allmap").css('height', Math.ceil($(window).height()*0.65));
		
		$(window).resize(function(){
			$("#allmap").css('height', Math.ceil($(window).height()*0.65));
		})
		
		$(".date[name='date']").datepicker({
			changeYear: true,
			dateFormat: "yy-mm-dd",
			dayNamesMin: [ "日", "一", "二", "三", "四", "五", "六" ],
			monthNames: [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
			prevText: "<<",
			nextText: ">>",
		});
		
		$(".date[name='start'],.date[name='stop']").timepicker();
		
		$(".btn").click(function(e){
			var dev = $(".odev").val();
			var start = $(".date[name='date']").val() + " " + $(".date[name='start']").val();
			var stop = $(".date[name='date']").val() + " " + $(".date[name='stop']").val();
			if (dev.length == 0) {
				$(".desc").html("请输入设备号").css("display", "block");
				return;
			}
			if (start.length == 0 || stop.length == 0){
				$(".desc").html("请输入时间").css("display", "block");
				return;
			}

			$.post($(this).val(),
				{
					obdid: dev,
					start: start,
					stop: stop
				},
				function(data){
					if (data == '') {
						$(".desc").html(dev + " 该时间段无行车轨迹").css("display", "block");
						map.clearOverlays();
					} else {
						$(".desc").css("display", "none");
						drawline(data);
					}
				})
		});
		
	})

	function drawline(data) {
		var coords = data.split(";");
		points = [];
		for (var i = 0; i < coords.length; i++) {
			var pt = coords[i].split(",");
			points[i] = new BMap.Point(pt[0],pt[1]);
		}
		map.centerAndZoom(points[0], 17);
		map.clearOverlays();
		marker = new BMap.Marker(points[0]);
		map.addOverlay(marker);
		marker = new BMap.Marker(points[points.length-1]);
		map.addOverlay(marker);

		polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});   //创建折线
		map.addOverlay(polyline);
	}
	
	function infoWin () {
		var href = window.location.href;
		href=href.substring(0, href.indexOf("Map")+4) + "getLocate";
		var val = arguments[0]?arguments[0]:'';
		$.post(href, { obdid: val }, function(data){
			var coords = data.split(";");
			for (var i = 0; i < coords.length; i++) {
				var pt = coords[i].split(",");
				points[i] = new BMap.Point(pt[1],pt[2]);
				marker = new BMap.Marker(points[i]);
				map.addOverlay(marker);
			}
		});
	}
</script>

</block>
